<template>
  <div class='bg'>
    <div class="bg-animated">
      <div class="bg1"></div>
      <div class="bg2"></div>
      <div class="bg3"></div>
      <div class="bg4"></div>
      <div class="bg5"></div>
      <div class="bg6"></div>
      <div class="bg7"></div>
      <div class="bg8"></div>
      <div class="bg9"></div>
      <div class="bg10"></div>
      <div class="bg1"></div>
      <div class="bg2"></div>
      <div class="bg3"></div>
      <div class="bg4"></div>
      <div class="bg5"></div>
      <div class="bg6"></div>
      <div class="bg7"></div>
      <div class="bg8"></div>
      <div class="bg9"></div>
      <div class="bg10"></div>
    </div>
    <span class="mask"></span>
  </div>

  </div>
</template>

<script>

</script>

<style lang='scss' scoped>
 .bg{
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  .bg-animated{
    width: 100%;
    height:3964px;
    animation: myfirst 80s linear infinite;
    div{
      height: 396px;
    }
    div.bg{
      &1{
        background: url(../assets/images/bg_anima_01.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }
      &2{
        background: url(../assets/images/bg_anima_02.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }&3{
        background: url(../assets/images/bg_anima_03.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }&4{
        background: url(../assets/images/bg_anima_04.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }&5{
        background: url(../assets/images/bg_anima_05.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }&6{
        background: url(../assets/images/bg_anima_06.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }&7{
        background: url(../assets/images/bg_anima_07.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }&8{
        background: url(../assets/images/bg_anima_08.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }&9{
        background: url(../assets/images/bg_anima_09.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }&10{
        background: url(../assets/images/bg_anima_10.jpg) no-repeat;
        -webkit-background-size: cover;
        background-size: cover;
      }
     }
  }
  .mask{
    position: absolute;
    width:100%;
    height: 100%;
    left: 0;
    top: 0;
    background:url(../assets/images/bg_gray.png) no-repeat;
    -webkit-background-size: cover;
    background-size: cover;
   
  }

 }
@keyframes myfirst
{
  from {transform:translateY(0);}
  to {transform:translateY(-3964px);}
}
 
@-webkit-keyframes myfirst
{
  from {transform:translateY(0);}
  to {transform:translateY(-3964px);}
}
</style>
